<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>成交管理</title>
    <link href="$!{basePath}/plug-in/css/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="$!{basePath}/content/system/h5/css/mobile-ui1.0-compress.css"/>
    <style>
        .inputStyle {
            outline: none;
            border: 1px solid #ccc;
            border-radius: 4px;
            height: 24px;
            width: 100%;}
        .form{
            width: 95%;
            margin: 0 auto;
            background-color: #F2F2F2;
            padding: 8px;
        }

        .myform{
            font-size: 14px;
            width: 95%;
            margin: 6px auto;
			display: flex;
			align-items: center;
        }
        .mylabel{
			width:20%;
        }
        .but{
            width: 20%;
            margin: 0 auto;
            background-color: #49A8EC;
            color: #fff;
            text-align: center;
            padding: 4px 0;
            border-radius: 4px;
        }
		.val{
			width:70%
		}
        .table{
            width: 95%;
            overflow: auto;
            margin: 0 auto;
            text-align: center;
        }
        table.gridtable {
            font-family: verdana,arial,sans-serif;
            font-size:11px;
            color:#333333;
            border-width: 1px;
            border-color: #666666;
            border-collapse: collapse;
            table-layout: fixed;
        }
        table.gridtable th {
            border-width: 1px;
            padding: 8px;
            border-style: solid;
            border-color: #666666;
            background-color: #dedede;
        }
        table.gridtable td {
            border-width: 1px;
            padding: 8px 4px;
            border-style: solid;
            border-color: #666666;
            background-color: #ffffff;
            word-break: keep-all;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>
    <div class="app">
        <div class="form">
            <form>
                <div class="myform">
                    <div class="mylabel">
                        <span>客户昵称</span>
                    </div>
                    <div class="val" style="width:50%;">
                        <input class="inputStyle" id="wxNickName" name="wxNickName" type="text" placeholder="请输入客户昵称">
                    </div>
                    <div class="but" onclick="serachCode()">
                        <span>搜索</span>
                    </div>
                </div>

            </form>
        </div>
        <div class="table">
            <table class="gridtable" width="100%">
                <thead>
                    <th style="width: 20%;text-align: center;">时间</th>
                    <th style="width: 20%;text-align: center;">课程</th>
                    <th style="text-align: center;">昵称</th>
                    <th style="width: 15%;text-align: center;">头像</th>
                    <th style="width: 15%;text-align: center;">操作</th>
                </thead>
                <tbody id="tableBody">
                </tbody>
            </table>
        </div>
    </div>
</body>
</html>
<script type="text/javascript" src="$!{basePath}/plug-in/js/jquery-1.9.1.js"></script>
<script src="$!{basePath}/content/system/h5/js/mobile-ui1.0-compress.js" type="text/javascript" charset="utf-8"></script>
<script>
    var pageNo=1,pageSize=20
    var type=this.getQueryVariable('type');
    getData()
    var normalState=true;
    var h=$(window).height();
    var domH= $("form").outerHeight()
    $(".table").css({"height":h-domH-80+"px"})
    //滚动条滚动的时候
    $(".table").scroll(function() {
        //获取当前加载更多按钮距离顶部的距离
        var bottomsubmit = $('.table').offset().top;
        //获取当前页面底部距离顶部的高度距离
        var nowtop = $(document).scrollTop() + $(window).height();
        //获取当前页数，默认第一页
        var now = $('.table').attr('now');
        //获取总页数
        var num = $('.table').attr('num');
        if(nowtop>bottomsubmit){
            console.log("加载更多")
            if(normalState==true){
                normalState=false;
                setTimeout(function(){
                    pageNo++;
                    getData()
                },500)
            }
        }
    });
    function getData(){
        var wxNickName = $("#wxNickName").val();
        $.ajax({
            url:"$!{basePath}/system/back/order/courseOrder/findMyGrades.do",
            type:"post",
            data:{
                pageNo:pageNo,
                pageSize:pageSize,
                wxNickName:wxNickName,
                type:type
            },
            success:function (res) {
                console.log("res:", res);
                var pageInfos = res.pageInfos.values;
                $('.table').attr('now',res.pageInfos.pagenation.pageNo)
                $('.table').attr('num',res.pageInfos.pagenation.pageCount)
                addTr(pageInfos);
            }
        })
    }

    /*添加表数据*/
    function addTr(pageInfos) {
        for(var i=0;i<pageInfos.length;i++){
            var str="<tr>\n";
            str += "<td>"+ pageInfos[i].createDate + "<br/>" + pageInfos[i].createTime +"</td>\n" +
                "<td>"+pageInfos[i].productName+"</td>\n" +
                "<td>"+pageInfos[i].userName+"</td>\n" +
                "<td><img src='"+pageInfos[i].wxPhoto+"' style='width: 40px;height: 40px'></td>\n" +
                "<td><button onclick='viewDetails'>查看</button></td>\n" +
                "</tr>";
            $("#tableBody").append(str)
        }
    }

    //查询
    function serachCode() {
        $("#tableBody").empty()
        getData()
    }

    function getQueryVariable(variable){
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        for (var i=0;i<vars.length;i++) {
            var pair = vars[i].split("=");
            if(pair[0] == variable){return pair[1];}
        }
        return(false);
    }
</script>